{% extends '__base__.html' %}

{% block title %}HLS{% endblock %}
{% block beforehead %}
<style>
    blockquote {
        border-left: #eee solid 5px;
        padding-left: 20px;
    }

    ul li {
        line-height: 20px;
    }

    code {
        color: #D34B62;
        background: #F6F6F6;
    }
</style>
{% endblock %}
{% block content %}
<div class="container">
    {% if mode == 'list' or mode == 'view' %}
    <div class="row">
        <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mkdir">新建文件夹</button>
                <button type="button" class="btn btn-primary"
                    onclick="assign('{{ prefix }}/edit?path=/{{ path | join('/') }}')">新建文件</button>
                <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#import">导入</button>
            </div>
            <div class="btn-group mr-2 choose" style="margin-bottom: 1rem; display: none;" role="group"
                aria-label="Second group">
                <button type="button" class="btn btn-primary move" data-path="/{{ path | join('/') }}">移动</button>
                <button type="button" class="btn btn-primary delete" data-path="/{{ path | join('/') }}">删除</button>
                <button type="button" class="btn btn-primary start" data-path="/{{ path | join('/') }}">开始</button>
                <button type="button" class="btn btn-primary pause" data-path="/{{ path | join('/') }}">暂停</button>
                <button type="button" class="btn btn-primary update_poster"
                    data-path="/{{ path | join('/') }}">更新封面</button>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | range_slice(0, loop.index) | join('/')}}&mode={{ mode }}">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
                <div class="custom-control custom-switch">
                    <label style="position: absolute;left: -30px;">list</label>
                    <input type="checkbox" class="custom-control-input" id="mode"
                        {% if mode == 'view' %}checked{% endif %}>
                    <label class="custom-control-label" for="mode">view</label>
                </div>
            </ol>
        </nav>
    </div>
    <div id="mkdir" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入文件名" aria-label="Recipient's username"
                        aria-describedby="basic-addon2">
                    <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="status" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lx modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path" readonly>
                    <div class="input-group">
                        <select class="custom-select" name="status" disabled>
                            <!-- <option selected>状态</option> -->
                            <option value="-1">下载已暂停</option>
                            <option value="0">下载中</option>
                            <option value="1">下载完成</option>
                        </select>
                    </div>
                    <textarea type="text" class="form-control" name="buf" rows="4" readonly></textarea>
                </div>
            </div>
        </div>
    </div>
    <div id="move" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <input type="text" class="form-control" name="newpath">
                    <button class="btn btn-success input-group-append">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div id="import" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="input-group">
                    <textarea type="text" class="form-control" placeholder="输入导入数据"></textarea>
                    <button class="btn btn-success input-group-append">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="update" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path" readonly>
                    <select class="custom-select" name="status">
                        <!-- <option selected>状态</option> -->
                        <option value="-1">暂停</option>
                        <option value="0">下载中</option>
                        <option value="1">下载完成</option>
                    </select>
                    <input type="text" class="form-control" name="referer" placeholder="输入m3u8下载地址">
                    <input type="text" class="form-control" name="poster_referer" placeholder="输入封面下载地址">
                    <input type="text" class="form-control" name="referer_referer" placeholder="输入关联网页">
                    <input type="text" class="form-control" name="url" placeholder="输入播放URI">
                </div>
                <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
    </div>
    {% endif %}
    {% if mode == 'list' %}
    <div class="row">
        <div class="col-md pb-4 table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col" width="6%"><input class="total" type="checkbox"></th>

                        <th scope="col" width="50%">名称</th>
                        <th scope="col" width="10%">大小</th>
                        <th scope="col" width="10%">状态</th>
                        <th scope="col" width="24%">修改日期</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in items %}
                    <tr class="fileitem" style="cursor: pointer;" data-path="/{{ path | join('/') }}/{{ item.name }}"
                        data-type="{{ item.content_type }}" data-status="{{ item.status }}"
                        {% if item.status != '1' and item.content_type != 'd' %}aria-label=true{% endif %}>
                        <td class="select"><input type="checkbox"></td>
                        {% if item.content_type == 'd' %}
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.name }}"
                            data-url="{{ prefix }}?path=/{{ path | join('/') }}/{{ item.name }}&mode={{ mode }}">
                            <a href="javascript:void(0)"><i class="fa fa-folder-o mr-3 "></i>{{ item.name }}</a>
                        </td>
                        {% else %}
                        <td class="tb-filename" data-toggle="tooltip" data-placement="top" title="{{ item.name }}"
                            data-url="{{ prefix }}/view?path=/{{ path | join('/') }}/{{ item.name }}">
                            <a href="javascript:void(0)"><i class="fa fa-file-o mr-3 "></i>{{ item.name }}</a>
                        </td>
                        {% endif %}
                        <td>-</td>
                        <td>{{ item.status | status_filter }}</td>
                        <td>{{ item.updated_at }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    {% if mode == 'view' %}
    <div class="row video-grid">
        {% for item in items %}
        <div class="colVideoList fileitem" style="cursor: pointer;" data-toggle="tooltip" data-placement="top"
            data-path="{{ item.path }}/{{ item.name }}" data-type="{{ item.content_type }}"
            data-status="{{ item.status }}" title="{{ item.name }}"
            {% if item.status != '1' and item.content_type != 'd' %}aria-label=true{% endif %}>
            <div {% if item.content_type == 'd' or item.status == '1' %} class="video-elem"
                {% elif item.status == '0' %} class="video-elem video-elem-0" {% else %}
                class="video-elem  video-elem--1" {% endif %}>
                <div class="display d-block">
                    <div class="scale"></div>
                    {% if item.content_type == 'd' %}
                    <div class="img" style="background-image: url('{{ static_url }}/app/folder.png')"></div>
                    <input type="checkbox">
                    {% else %}
                    <div class="img" {% if item.poster %}
                        style="background: url('{{ posterurl }}/{{ item.poster }}'), url('{{ static_url }}/app/404.png');background-size: cover;"
                        {% endif %}></div>
                    <!-- <div class="img" {% if item.poster %} style="background-image: url('{{ posterurl }}/{{ item.poster }}')" {% endif %}></div> -->
                    <small class="layer">{{ item.duration | duration_filter }}</small>
                    <input type="checkbox">
                    {% endif %}
                </div>
                <a class="title text-sub-title mt-2 mb-3">{{ item.name }}</a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% if mode == 'list' or mode == 'view' %}
    <div id="popupRC" style="display:none;background-color: antiquewhite;width: 13em;" class="panel panel-primary">
        <!-- <div class="panel-heading ">Right Click Window</div> -->
        <div class="panel-body">
            <button class="dropdown-item open">打开</button>
            <button class="dropdown-item hls_status">状态</button>
            <button class="dropdown-item start">开始</button>
            <button class="dropdown-item pause">暂停</button>
            <button class="dropdown-item update_poster">更新封面</button>
            <button class="dropdown-item update">编辑</button>
            <button class="dropdown-item export">导出</button>
            <button class="dropdown-item move">移动</button>
            <button class="dropdown-item delete">删除</button>
        </div>
    </div>
    {% endif %}

    {% if mode == 'detail' %}
    <div class="row">
        <div class="col-md-6 btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" class="btn btn-primary update" data-path="/{{ path | join('/') }}">编辑</button>
                <button type=" button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item active" aria-current="page" data-toggle="tooltip" data-placement="top"
                    title="{{ item }}">{{ item }}</li>
                {% else %}
                <li class="breadcrumb-item dir">
                    <a href="{{ prefix }}?path=/{{ path | range_slice(0, loop.index) | join('/')}}">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
    </div>
    <div id="update" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="form-group">
                    <input type="text" class="form-control" name="path" readonly>
                    <select class="custom-select" name="status">
                        <!-- <option selected>状态</option> -->
                        <option value="-1">暂停</option>
                        <option value="0">下载中</option>
                        <option value="1">下载完成</option>
                    </select>
                    <input type="text" class="form-control" name="referer" placeholder="输入m3u8下载地址">
                    <input type="text" class="form-control" name="poster_referer" placeholder="输入封面下载地址">
                    <input type="text" class="form-control" name="referer_referer" placeholder="输入关联网页">
                    <input type="text" class="form-control" name="url" placeholder="输入播放URI">
                </div>
                <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
        aria-labelledby="mySmallModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <textarea style="height: 50vh" readonly></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10 offset-1" id="player" {% if item.url %}data-url={{ item.url }}{% endif %}>
        </div>
    </div>
    {% endif %}
    {% if mode == 'edit' %}
    <div class="row">
        <div class="col-md-6 btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group mr-2" style="margin-bottom: 1rem;" role="group" aria-label="First group">
                <button type="button" id="save" class="btn btn-primary" data-path="/{{ path | join('/') }}">
                    <span class="spinner-border spinner-border-sm" style="display: none;" role="status"
                        aria-hidden="true"></span>
                    保存</button>
            </div>
        </div>
    </div>
    <div class="row">
        <nav class="col-md-8" aria-label="breadcrumb">
            <ol class="breadcrumb">
                {% with %}
                {% for item in path %}
                {% if loop.last %}
                <li class="breadcrumb-item"><a
                        href="{{ prefix }}?path=/{{ path | range_slice(0, loop.index) | join('/')}}">{{ item }}</a>
                </li>
                {% else %}
                <li class="breadcrumb-item dir">
                    <a href="{{ prefix }}?path=/{{ path | range_slice(0, loop.index) | join('/')}}">{{ item }}</a>
                </li>
                {% endif %}
                {% endfor %}
                {% endwith %}
            </ol>
        </nav>
    </div>
    <div class="row">
        <div id="edit" class="col-md-6" style="background-color: rgba(251, 241, 227, 0.95);">
            <div class="form-group">
                <div class="form-group">
                    <label for="edit-url">URL</label>
                    <input type="text" class="form-control" id="edit-url" name="referer" placeholder="输入URL">
                </div>
                <div class="form-group">
                    <label for="edit-name">名称</label>
                    <input type="text" class="form-control" id="edit-name" name="name" placeholder="输入名称">
                </div>
                <div class="form-group">
                    <label for="edit-referer">关联</label>
                    <input type="text" class="form-control" id="edit-referer" name="referer_referer"
                        placeholder="输入关联网页">
                </div>
                <div class="form-group">
                    <label for="edit-poster_referer">封面</label>
                    <input type="text" class="form-control" id="edit-poster_referer" name="poster_referer"
                        placeholder="输入封面地址">
                </div>
                <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">添加</button>
            </div>
        </div>

        <textarea id="view" class="col-md-6" style="background-color: rgba(251, 241, 227, 0.95);"></textarea>
    </div>
    {% endif %}
    {% endblock %}
    {% block beforebody %}
    <script src="{{ static_url}}/app/main.js"></script>
    <script>
        document.querySelectorAll('main a').forEach(el => {
            el.addEventListener('click', function (event) {
                event.preventDefault();
                assign(el.href)
            }, false)
        })
        function assign(path) {
            if ((path.indexOf('?') >= 0 ? path.split('?')[0] : path).endsWith('{{ prefix }}') && path.indexOf('&mode=') == -1) {
                location.assign(path + '&mode=' + get_cookie('mode'))
            } else {
                location.assign(path)
            }
        }
        let prefix = '{{ prefix }}'
        let content_type = 'hls'
        let cur_path = '{{ path | join("/") }}'
        // {% if mode == 'list' or mode == 'view' %}
        set_cookie('mode', '{{ mode }}')

        $(".fileitem").bind('contextmenu', function (event) {
            event.preventDefault(); // prevents default menu
            let el = event.target
            while (!el.dataset['path']) {
                el = el.parentNode
            }
            // $("#popupRC .showfile").css({ display: "block" })
            let path = el.dataset['path']
            let ppath = path.slice(0, path.lastIndexOf('/'))
            let type = el.dataset['type']
            let status = el.dataset['status']

            // 状态
            querySelector('#popupRC .hls_status').dataset['path'] = path
            $('#popupRC .hls_status').css('display', 'block')

            // 编辑
            querySelector('#popupRC .update').dataset['path'] = path
            $('#popupRC .update').css('display', 'block')

            // 导出
            querySelector('#popupRC .export').dataset['path'] = path
            $('#popupRC .export').css('display', 'block')

            // 打开
            querySelector('#popupRC .open').dataset['path'] = path
            querySelector('#popupRC .open').dataset['type'] = type
            if (status == '1' || type == 'd') {
                $('#popupRC .open').css('display', 'block')
            } else {
                $('#popupRC .open').css('display', 'none')
            }

            // 移动
            querySelector('#popupRC .move').dataset['path'] = path
            $('#popupRC .move').css('display', 'block')

            // 更新封面
            querySelector('#popupRC .update_poster').dataset['path'] = ppath
            $('#popupRC .update_poster').css('display', 'block')

            // 删除
            querySelector('#popupRC .delete').dataset['path'] = ppath
            $('#popupRC .delete').css('display', 'block')

            if (status === '-1' && type === 'hls') {
                // 开始
                querySelector('#popupRC .start').dataset['path'] = ppath
                $('#popupRC .start').css('display', 'block')
                $('#popupRC .pause').css('display', 'none')
            }
            else if (status === '0' && type === 'hls') {
                // 暂停
                querySelector('#popupRC .pause').dataset['path'] = ppath
                $('#popupRC .pause').css('display', 'block')
                $('#popupRC .start').css('display', 'none')
            } else {
                $('#popupRC .pause').css('display', 'none')
                $('#popupRC .start').css('display', 'none')
            }

            $("#popupRC").css({ position: "absolute", top: event.pageY, left: event.pageX, display: "block" });

            document.querySelectorAll('.fileitem input').forEach(el => {
                el.checked = false
            })
            el.querySelector('input').checked = true
            querySelector('.btn-toolbar .choose').style.display = 'inline-flex'
        })
        document.querySelectorAll('.update').forEach(el => {
            el.addEventListener('click', function (event) {
                let el = event.target
                let fullpath = el.dataset['path']
                if (!fullpath) return
                axios.get('{{ prefix }}/getitem', {
                    params: {
                        fullpath: fullpath
                    }
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg']['path'])
                                document.querySelector('#update input[name=path]').value = data['msg']['path'] + '/' + data['msg']['name']
                                document.querySelector('#update select[name=status]').value = data['msg']['status']
                                document.querySelector('#update input[name=referer]').value = data['msg']['referer']
                                document.querySelector('#update input[name=poster_referer]').value = data['msg']['poster_referer']
                                document.querySelector('#update input[name=referer_referer]').value = data['msg']['referer_referer']
                                document.querySelector('#update input[name=url]').value = data['msg']['url']
                                $('#update').modal('show')
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }, false)
        })
        // 修改[确定]按钮
        document.querySelector('#update .modal-content button.btn-success').addEventListener('click', function (event) {
            let path = document.querySelector('#update .modal-content input[name="path"]').value
            let status = document.querySelector('#update .modal-content select[name="status"]').value
            let referer = document.querySelector('#update .modal-content input[name="referer"]').value
            let referer_referer = document.querySelector('#update .modal-content input[name="referer_referer"]').value
            let poster_referer = document.querySelector('#update .modal-content input[name="poster_referer"]').value
            let url = document.querySelector('#update .modal-content input[name="url"]').value
            axios.post('{{ prefix }}/save', {
                path: path,
                status: status,
                referer: referer,
                referer_referer: referer_referer,
                poster_referer: poster_referer,
                url: url,
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            assign('{{ prefix }}?path=' + data['msg'].split('/').slice(0, -1).join('/'))
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
        document.querySelectorAll('.start').forEach(el => {
            el.addEventListener('click', function (event) {
                let paths = []
                document.querySelectorAll('.fileitem input:checked').forEach(el => {
                    let elt = el
                    while (!elt.dataset['path']) {
                        elt = elt.parentNode
                    }
                    paths.push(elt.dataset['path'])
                })
                let fullpath = event.target.dataset["path"]
                paths = JSON.stringify(paths)
                axios.post('{{ prefix }}/hls_start', {
                    paths: paths,
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                assign('{{ prefix }}?path=' + fullpath)
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }, false)
        })

        document.querySelectorAll('.pause').forEach(el => {
            el.addEventListener('click', function (event) {
                let paths = []
                document.querySelectorAll('.fileitem input:checked').forEach(el => {
                    let elt = el
                    while (!elt.dataset['path']) {
                        elt = elt.parentNode
                    }
                    paths.push(elt.dataset['path'])
                })
                let fullpath = event.target.dataset["path"]
                paths = JSON.stringify(paths)
                axios.post('{{ prefix }}/hls_pause', {
                    paths: paths,
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                assign('{{ prefix }}?path=' + fullpath)
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }, false)
        })

        document.querySelectorAll('.update_poster').forEach(el => {
            el.addEventListener('click', function (event) {
                let paths = []
                document.querySelectorAll('.fileitem input:checked').forEach(el => {
                    let elt = el
                    while (!elt.dataset['path']) {
                        elt = elt.parentNode
                    }
                    paths.push(elt.dataset['path'])
                })
                let fullpath = event.target.dataset["path"]
                paths = JSON.stringify(paths)
                axios.post('{{ prefix }}/update_poster', {
                    paths: paths,
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                assign('{{ prefix }}?path=' + fullpath)
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }, false)
        })

        querySelector('#popupRC .hls_status').addEventListener('click', function (event) {
            let el = event.target
            let fullpath = el.dataset['path']
            if (!fullpath) return
            axios.get(prefix + '/hls_status', {
                params: {
                    fullpath: fullpath
                }
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            querySelector('#status input[name=path]').value = fullpath
                            querySelector('#status select[name=status]').value = data['msg']['status']
                            querySelector('#status textarea[name=buf]').value = data['msg']['buf']
                            $('#status').modal('show')
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        }, false)
        // {% endif %}
        // {% if mode == 'edit' %}
        let import_obj = []
        let add = document.querySelector('#edit button')
        let view = document.querySelector('#view')
        let save = document.querySelector('#save')
        let path = add.dataset['path']
        if (add) {
            add.addEventListener('click', function (event) {
                let obj = { path: event.target.dataset['path'] }
                document.querySelector('#edit').querySelectorAll('input').forEach(el => {
                    obj[el.name] = el.value
                })
                if (view.value) {
                    import_obj = JSON.parse(view.value)
                }
                import_obj.push(obj)
                // console.log(JSON.stringify(import_obj, null, "\t"))
                view.value = JSON.stringify(import_obj, null, "\t")
            }, false)
        }
        if (save) {
            save.addEventListener('click', function (event) {
                let data = ""
                if (view.value) {
                    data = JSON.stringify(JSON.parse(view.value))
                    console.log(data)
                } else {
                    alert('文本框为空')
                    return
                }
                document.querySelector('#save .spinner-border').style.display = 'inline-block'
                axios.post('{{ prefix }}/itemimport', {
                    data: data,
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg'])
                                assign('{{ prefix }}?path=' + path)
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                        document.querySelector('#save .spinner-border').style.display = 'none'
                    })
                    .catch(function (error) {
                        console.log(error);
                        document.querySelector('#save .spinner-border').style.display = 'none'
                    });
            }, false)
        }
        // {% endif %}
        // {% if mode == 'detail' %}
        let url = document.querySelector('#player').dataset['url']
        if (url) {
            video(url, '#player')
        }
        function video(url, el) {
            let src = '{{ hlsurl }}/' + url
            let video = document.createElement('video')
            video.controls = "controls"
            video.style = 'object-fit: contain;max-height: 65vh;width: 100%;background-color: rgba(17, 27, 27, 0.8);'
            let hls = new Hls();
            hls.loadSource(src);
            hls.attachMedia(video);
            /*
            hls.on(Hls.Events.MANIFEST_PARSED, function () {
                video.muted = true
                video.play();
            });
            */
            document.querySelector(el).append(video)
        }
        document.querySelectorAll('.update').forEach(el => {
            el.addEventListener('click', function (event) {
                let el = event.target
                let fullpath = el.dataset['path']
                if (!fullpath) return
                axios.get('{{ prefix }}/getitem', {
                    params: {
                        fullpath: fullpath
                    }
                })
                    .then(function (response) {
                        // console.log(response);
                        if (response.status === 200) {
                            let data = response.data
                            if (data['code'] === 0) {
                                console.log('SUCCESS: ' + data['msg']['path'])
                                document.querySelector('#update input[name=path]').value = data['msg']['path'] + '/' + data['msg']['name']
                                document.querySelector('#update select[name=status]').value = data['msg']['status']
                                document.querySelector('#update input[name=referer]').value = data['msg']['referer']
                                document.querySelector('#update input[name=poster_referer]').value = data['msg']['poster_referer']
                                document.querySelector('#update input[name=referer_referer]').value = data['msg']['referer_referer']
                                document.querySelector('#update input[name=url]').value = data['msg']['url']
                                $('#update').modal('show')
                            } else {
                                console.log('FAILED: ' + data['msg'])
                                alert(data['msg'])
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }, false)
        })
        // 修改[确定]按钮
        document.querySelector('#update .modal-content button.btn-success').addEventListener('click', function (event) {
            let path = document.querySelector('#update .modal-content input[name="path"]').value
            let status = document.querySelector('#update .modal-content select[name="status"]').value
            let referer = document.querySelector('#update .modal-content input[name="referer"]').value
            let referer_referer = document.querySelector('#update .modal-content input[name="referer_referer"]').value
            let poster_referer = document.querySelector('#update .modal-content input[name="poster_referer"]').value
            let url = document.querySelector('#update .modal-content input[name="url"]').value
            axios.post('{{ prefix }}/save', {
                path: path,
                status: status,
                referer: referer,
                referer_referer: referer_referer,
                poster_referer: poster_referer,
                url: url,
            })
                .then(function (response) {
                    // console.log(response);
                    if (response.status === 200) {
                        let data = response.data
                        if (data['code'] === 0) {
                            console.log('SUCCESS: ' + data['msg'])
                            assign('{{ prefix }}/view?path=' + data['msg'])
                        } else {
                            console.log('FAILED: ' + data['msg'])
                            alert(data['msg'])
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        })
        // {% endif %}
    </script>
    {% if mode == 'list' %}
    <script src="{{ static_url}}/app/list.js"></script>
    {% endif %}
    {% if mode == 'view' %}
    <script src="{{ static_url}}/app/view.js"></script>
    {% endif %}
    {% endblock %}